<script lang="ts" setup>
import { NScrollbar } from 'naive-ui'
import { useFlowStore } from '../flowStore'

import './index.css'

import ApproverComponent from './approver-component/index.vue'
import NodeEditor from './component/node-editor/index.vue'
import ConditionComponent from './condition-component/index.vue'
import EndComponent from './end-component/index.vue'
import ParallelComponent from './parallel-component/index.vue'
import StartComponent from './start-component/index.vue'
import TriggerComponent from './trigger-component/index.vue'
import Zoom from './zoom/index.vue'

const flowStore = useFlowStore()

</script>
<template>
    <div class="flame-container">
        <div style="height:100%;width: 100%;">
            <zoom v-model:zoom-config="flowStore.zoomConfig" />
            <n-scrollbar style="max-height: 100%" x-scrollable trigger="none">
                <div class="flow-design" :style="{ transform: 'scale(' + flowStore.zoomConfig / 100 + ')' }">
                    <div v-for="child in flowStore.flowNodeTree" :key="child.nodeId" class="flow-node-container">

                        <start-component v-if="child.nodeType === '0'" :node="child" />

                        <approver-component v-if="child.nodeType === '1'" :node="child" />

                        <condition-component v-if="child.nodeType === '2'" :node="child" />

                        <parallel-component v-if="child.nodeType === '4'" :node="child" />

                        <trigger-component v-if="child.nodeType === '6'" :node="child" />

                        <end-component v-if="child.nodeType === '9'" :node="child" />
                    </div>
                </div>
            </n-scrollbar>
            <node-editor v-if="['0', '1'].includes(flowStore.mode)" />
        </div>
    </div>
</template>
<style scoped></style>